﻿
@{
    ViewBag.Title = "Update";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model Shop.Models.ProductCategoryUpdateVModel
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>商品分类编辑</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                    <li class="breadcrumb-item active">商品分类</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-info">

                <!-- /.card-header -->
                <!-- form start -->
                <form class="form-horizontal" id="form" enctype="multipart/form-data">
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="Name" class="col-sm-2 col-form-label">分类名称:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="@Model.Category.Name"  id="Name" name="Name" placeholder="请输入分类名称">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="PID" class="col-sm-2 col-form-label">父级分类:</label>
                            <div class="col-sm-10">

                                <select id="PID" class="form-control  select2 select2-hidden-accessible" style="width: 100%;">
                                    <option value="0">请选择</option>
                                    @foreach (var item in Model.Categories)
                                    {
                                        <option value="@item.ID">@item.Name</option>
                                    }


                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="OrderNum" class="col-sm-2 col-form-label">排序号:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="OrderNum" value="@Model.Category.OrderNum" name="OrderNum" placeholder="0">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="file" class="col-sm-2 col-form-label">分类图片</label>
                            <div class="col-sm-10">
                                <input type="file" id="file">
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <button type="submit" id="btnOK" class="btn btn-primary">提交</button>
                        <a href="/ProductCategory/List" class="btn btn-default float-right">返回</a>
                    </div>
                    <!-- /.card-footer -->
                </form>
            </div>
            <!-- /.card -->
        </div>
    </div>
</section>
@section js{
    <script>
        $(function () {
             $("#PID").val('@Model.Category.PID').trigger('change');
            //$("#PID").select2('val',@Model.Category.PID);
            $('#file').fileinput({
                language: 'zh',
                allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'],
                showUpload: false,
                browseClass: 'btn btn-primary',
                dropZoneEnabled: false,
                initialPreview: [
                    "<img src='/CategoryImages/@Model.Category.Img' class= 'file-preview-image' width=\"200\">"
                ]
            });
            $('#form').validate({
                rules: {
                    Name: {
                        required: true
                    },
                    OrderNum: {
                        digits: true,
                        required: true

                    }
                },
                messages: {
                    Name: {
                        required: "分类名称必须填写"
                    },
                    OrderNum: {
                        required: "排序号必须填写",
                        digits: "排序号必须是整数",

                    },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.col-sm-10').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function (form) {

                    var formData = new FormData();
                formData.append("ID", @Model.Category.ID)
                formData.append("Name", $("#Name").val())
                formData.append("PID", $("#PID").val())
                formData.append("OrderNum", $("#OrderNum").val())
                formData.append("file", $("#file")[0].files[0])
                formData.append("Img", "@Model.Category.Img")
                $.ajax({
                    url: "/ProductCategory/Update",
                    type: "POST",
                    dateType: "json",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        if (result.state) {
                            toastr.success('修改成功')
                        } else {
                            toastr.error(result.msg)

                        }
                    },
                    error: function (result) {
                        toastr.error('修改失败')

                    }

                })
                }


            })
           
        })
    </script>
}
